<template>
    <app-layout>
        <view v-if="setting" class='top'>
            <image :src='setting.ranking_pic.length > 0?setting.ranking_pic:_num==1?stepImg.app_image.daily:stepImg.app_image.top_bg'></image>
        </view>
        <view class='rank'>
            <view @click="change(1)" class="rank-item">今日步数排行</view>
            <view @click="change(2)" class="rank-item">总财富排行</view>
        </view>
        <view :class="_num==1 ? 'triangle-left':'triangle-right'"></view>
        <view v-if="user.id > 0" class='my'>
            <view class='avatar'>
                <image :src='user.avatar'></image>
            </view>
            <view class='my-info'>
                <view class='my-name'>{{user.nickname}}</view>
                <view >{{user.raking > 0 ? '第'+user.raking+'名':'暂未上榜'}}</view>
            </view>
            <view class='moeny'>
                <view v-if="_num==1" class='number'>{{user.total_num ? user.total_num : 0}}</view>
                <view v-if="_num==2" class='number'>{{user.step_currency ? user.step_currency : 0}}</view>
                <view v-if="_num==1">步数</view>
                <view v-if="_num==2">{{setting.currency_name ? setting.currency_name : '活力币'}}数</view>
            </view>
        </view>
        <view class='list' v-if="list && list.length" :style="{'margin-bottom': `${adHeight}px`}">
            <view class='list-item' v-for="info in list" :key="info.id">
                <view class='noun'>
                    <view class='noun-text' v-if='info.raking > 3'>{{info.raking}}</view>
                    <image :src='info.img' v-if='info.raking < 4'></image>
                </view>
                <view class='avatar'>
                    <image :src='info.avatar'></image>
                </view>
                <view class='info'>
                    <view class='name'>{{info.nickname}}</view>
                </view>
                <view class='moeny'>
                    <view v-if="_num==1" class='number'>{{info.total_num ? info.total_num : 0}}</view>
                    <view v-if="_num==2" class='number'>{{info.step_currency ? info.step_currency : 0}}</view>
                    <view v-if="_num==1">步数</view>
                    <view v-if="_num==2">{{setting.currency_name ? setting.currency_name : '活力币'}}数</view>
                </view>
            </view> 
        </view>
        <view id='ad'>
            <app-ad v-if="ad_data.unit_id"
                    :unit-id="ad_data.unit_id"
                    :type="ad_data.type"
                    :video-url="ad_data.video_url"
                    :pic-url="ad_data.pic_url"
                    :coupon-url="coupon_url"
                    :coupon-params="ad_data | getObje(ad_data)"
            />
        </view>
    </app-layout>
</template>

<script>
    import appAd from "../../../components/page-component/app-ad/app-ad"
    import {mapState} from "vuex";

    export default {
        data() {
            return {
                list: [],
                over: false,
                ad_data: {},
                page: 1,
                user: {},
                more: true,
                _num: 1,
                setting: null,
                adHeight: 0,
                coupon_url: this.$api.step.receive,
            }
        },
        components: {
            appAd
        },
        computed: {
            ...mapState({
                stepImg: state => state.mallConfig.plugin.step,
            })
        },
        filters: {
            getObje(data, temp) {
                return {
                    id: data ? data.id : 0
                }
            }
        },
        onReachBottom() {
            if(!this.more) return;
            this.page++;
            uni.showLoading();
            let url;
            if (this._num == 1) {
                url = this.$api.step.step_convert
            } else if (this._num == 2) {
                url = this.$api.step.ranking
            }
            this.getList(url);
        },
        methods: {
            getHeight() {
                const self = this;
                setTimeout(() => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('#ad').boundingClientRect(res => {
                        self.adHeight = res.height;
                    }).exec();
                })
            },
            change(num) {
                let that = this;
                uni.showLoading({
                    mask: true,
                    text: '加载中...'
                });
                that.list = [];
                that.user = {};
                that._num = num;
                let url;
                if (num == 1) {
                    url = that.$api.step.step_convert
                } else if (num == 2) {
                    url = that.$api.step.ranking
                }
                that.page = 1;
                that.getList(url);
            },
            getSetting() {
                let that = this;
                that.$request({
                    url: that.$api.step.setting,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.setting = response.data;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            getList(url) {
                let that = this;
                that.$request({
                    url: url,
                    data: {
                        status: that._num,
                        page: that.page
                    }
                }).then(response=>{
                    that.$hideLoading();
                    uni.hideLoading();
                    if(response.code == 0) {
                        if(that.page == 1) {
                            that.list = response.data.list;
                            that.user = response.data.user;
                            that.ad_data = response.data.ad_data;
                            that.getHeight();
                        }else {
                            that.list = that.list.concat(response.data.list);
                        }
                        if (that.list.length > 0) {
                            for (let i = 0; i < that.list.length; i++) {
                                that.list[i].raking = i + 1;
                            }
                            that.list[0].img = './../image/top1.png';
                            if (that.list.length > 1) {
                                that.list[1].img = './../image/top2.png';
                            }
                            if (that.list.length > 2) {
                                that.list[2].img = './../image/top3.png';
                            }
                        }
                        that.more = response.data.list.length == 0 ? false : true;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                    uni.hideLoading();
                });
            },
        },

        onLoad() { this.$commonLoad.onload();
            let that = this;
            let url = that.$api.step.step_convert;
            that._num = 1;
            that.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            that.getSetting();
            that.getList(url);
        }
    }
</script>

<style scoped lang="scss">
    .top {
        width: 100%;
        height: #{400rpx};
        image {
            width: 100%;
            height: #{400rpx};
            z-index: 2;
        }
    }

    .triangle-left {
        width: 0;
        height: 0;
        border-left: #{14rpx} solid transparent;
        border-right: #{14rpx} solid transparent;
        border-bottom: #{18rpx} solid white;
        position: absolute;
        left: 22.5%;
        top: #{384rpx};
        z-index: 10;
    }

    .triangle-right {
        width: 0;
        height: 0;
        border-left: #{14rpx} solid transparent;
        border-right: #{14rpx} solid transparent;
        border-bottom: #{18rpx} solid white;
        position: absolute;
        right: 22.5%;
        top: #{384rpx};
        z-index: 10;
    }

    .rank {
        width: 100%;
        position: absolute;
        top: #{300rpx};
        background-color: rgba(0, 0, 0, 0.1);
        color: white;
        font-size: #{32rpx};
        z-index: 5;
        .rank-item {
            display: inline-block;
            width: 50%;
            height: 100%;
            line-height: #{100rpx};
            text-align: center;
        }
    }

    .my {
        height: #{136rpx};
        width: 100%;
        background-color: white;
        margin-bottom: #{20rpx};
        .my-info {
            color: #999;
            font-size: #{24rpx};
            padding: #{32rpx} 0;
            height: 100%;
            float: left;
            .my-name {
                color: #353535;
                font-size: #{30rpx};
                margin-bottom: #{8rpx};
            }
        }
    }

    .avatar {
        padding: #{24rpx};
        float: left;
        image {
            height: #{80rpx};
            width: #{80rpx};
            border: #{4rpx} #f09b48 solid;
            border-radius: #{40rpx};
        }
    }

    .moeny {
        float: right;
        color: #999;
        font-size: #{24rpx};
        padding: #{32rpx} #{24rpx};
        height: 100%;
        text-align: right;
        .number {
            font-size: #{34rpx};
            font-family: 'DIN';
            color: #353535;
            margin-bottom: #{10rpx};
        }
    }

    .list-item {
        height: #{135rpx};
        width: 100%;
        background-color: white;
        border-bottom: #{1rpx} solid #e2e2e2;
        overflow: hidden;
        .noun {
            width: #{100rpx};
            height: #{135rpx};
            float: left;
            text-align: center;
            padding: #{43rpx} #{25rpx};
            image {
                width: #{50rpx};
                height: #{50rpx};
            }
            .noun-text {
                font-size: #{30rpx};
                color: #353535;
            }
        }
        .avatar {
            padding-left: 0;
        }
        .info {
            float: left;
            color: #353535;
            font-size: #{30rpx};
            line-height: #{136rpx};
            width: 45%;
            overflow: hidden;
            .name {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    } 

    #ad {
        width: 100%;
        position: fixed;
        bottom: 0;
    }
</style>